<!Document>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no" name="format-detection" />
    <title>WebViewJavascriptBridge</title>
</head>

<body>
<script>

    let u = navigator.userAgent;
   function setupWebViewJavascriptBridge(callback) {
       //var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
       //鍒ゆ柇ios 杩樻槸Android
       if (/(iPhone|iPad|iPod|iOS|harmony)/i.test(u)) {
           if (window.WebViewJavascriptBridge) {
               return callback(window.WebViewJavascriptBridge)
           }
           if (window.WVJBCallbacks) {
               return window.WVJBCallbacks.push(callback)
           }
           window.WVJBCallbacks = [callback]
           let WVJBIframe = document.createElement('iframe')
           WVJBIframe.style.display = 'none'
           WVJBIframe.src = 'https://__bridge_loaded__'
           document.documentElement.appendChild(WVJBIframe)
           setTimeout(() => {
               document.documentElement.removeChild(WVJBIframe)
           }, 0)
       } else {

           connectWebViewJavascriptBridge(callback);
       }
   }




           function callHandler(name, data, callback) {
               setupWebViewJavascriptBridge(function (bridge) {
                   bridge.callHandler(name, data, callback)
               })
           }
           function  registerhandler(name, callback) {
               setupWebViewJavascriptBridge(function (bridge) {
                   bridge.registerHandler(name, function (data, responseCallback) {
                       callback(data, responseCallback)
                   })
               })
           }

   //瀹夊崜娉ㄥ唽浜嬩欢鐩戝惉
   function connectWebViewJavascriptBridge(callback) {
       if (window.WebViewJavascriptBridge) {
           /* eslint-disable */
           callback(WebViewJavascriptBridge)
       } else {
           document.addEventListener(
               'WebViewJavascriptBridgeReady',
               function () {
                   callback(WebViewJavascriptBridge)
               },
               false
           );
       }
   }
   // 瀹夊崜浼犲€煎垵濮嬪寲
   connectWebViewJavascriptBridge(function (bridge) {
       if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
           bridge.init(function (message, responseCallback) {
               responseCallback("");
           });
       }


   });







           //杩斿洖
           function backTrack() {
               callHandler('backTrack', null, function(response) {
                   log('backTrack:', response);
               });

           }

           function imgClick(event){
                console.log('imgClick:', event);
               callHandler('showImage', {'url': '我是imgClick','index':'0'}, function(response) {

               });


           }

           function getImages(){
               var objs = document.getElementsByTagName("img");

               for(var i=0;i<objs.length;i++){

                objs[i].addEventListener('click',imgClick,true);

               };
           }

           //getImages();
</script>

<h2>WebViewJavascriptBridge</h2>

<div id='buttons' >
    <button onclick="imgClick()">获取原生信息</button>
</div>
<br/>
<div id='log'></div>

</body>

</html>